<template>
	<page-loading :show="pageDetail">
  <view class="container ">
    <!-- v-if="isshow" -->
    <view class="header flex flex-ac-sb">
      <view class="width-30">
        <i-icon icon="icondingdandengdai" type="single" class="mr-5 middle" size="34rpx" color="#333"></i-icon>
        {{ getStatus(pageDetail.contract_status) }}
      </view>
      <view v-if="ordertab == 0 && pageDetail.contract_status === '0'" class="width-70 u-text-right">
        <text class="font-24">剩余询价时间：</text>
        <text class="font-30">{{ pageDetail.waittime }}</text>
      </view>
    </view>
    <!-- 合同详情 -->

    <view class="mids boxS">
      <!-- 存在待收货状态 -->
      <!-- <view class="mt140 LogisticsDetail">
				<view class="title pad-t-b-10 color-333 font-36 font-bold">物流信息</view>
				<view class="font-24 pad-t-b-10 border-bottom-1">物流/快递公司:</view>
				<view class="font-24 pad-t-b-10 ">快递/物流单号：</view>
			</view> -->

      <view class="mt140 LogisticsDetail" v-if="
					(ordertab == 0 && (pageDetail.contract_status === '3' || pageDetail.contract_status === '4' )) ||
						(ordertab == 1 && (pageDetail.contract_status == '3' || pageDetail.contract_status == '2' || pageDetail.contract_status == '4' ))
				">
        <view class="title pad-t-b-10 color-333 font-36 font-bold">录入物流单号</view>
        <view class="" v-if="pageDetail.contract_status === '3' || pageDetail.contract_status === '4'">
          <view class="font-26 pad-t-b-20 border-bottom-1">
            快递/物流公司：
            <text class="color-333">{{ pageDetail.logistics_name }}</text>
          </view>
          <view class="font-26 pad-t-b-20 ">
            快递/物流单号：
            <text class="color-333">{{ pageDetail.logistics_number }}</text>
          </view>
        </view>
        <view class="" v-else>
          <view class="font-26 pad-t-b-20 border-bottom-1 flex">
            <view class="width-95">
              快递/物流公司：
              <text @click="expressShow = true">{{ expressName ? expressName : '请选择快递/物流公司' }}</text>
            </view>
            <view class="u-text-right" @click="expressShow = true">
              <u-icon class="iconfollow" name="play-right-fill" color="#666" size="28"></u-icon>
            </view>

          </view>
          <view class="font-26 pad-t-b-20 ">
            快递/物流单号：
            <input class="block-inline  middle font-26" placeholder="请输入物流单号" type="text" v-model="expressVal" />
          </view>
        </view>
      </view>
      <view :class="
					(ordertab == 0 && (pageDetail.contract_status === '3' || pageDetail.contract_status === '4')) ||
					(ordertab == 1 && (pageDetail.contract_status == '3' || pageDetail.contract_status == '2' || pageDetail.contract_status == '4'))
						? 'mt-20'
						: 'mt140'
				">
        <view class="headers">购车合同</view>
        <view class="h-two">
          <view class="h-item">1.合同内容可按需求修改。</view>
          <view class="h-item">2.买卖双方发起合同时，买卖双方均需冻结定金到平台。</view>
          <view class="h-item">3.买卖双方发起合同后，需等待对方定金冻结到平台。</view>
          <view class="h-item">4.冻结了定金的合同在买卖双方同意后自动生效。</view>
        </view>
      </view>
      <view class="sell">
        <view class="mid-item">
          <view class="mid-left" style="width: 300rpx;">
            <i-icon icon="iconmaifangxinxi" type="single" class="mr-5 middle" size="36rpx" color="#666"></i-icon>
            <text class="inform">买方信息</text>
          </view>
          <view class="mid-right"></view>
        </view>
        <view class="titleName colorE" :style="pageDetail.buyerstorename?'line-height:54rpx':'line-height:108rpx'">
          <view class="font-30 color-333">
            {{ pageDetail.buyerstorename?pageDetail.buyerstorename:pageDetail.buyercompanyname }}
            <i-icon icon="iconbao_1" type="single" class="ml-5 middle" size="32rpx" color="#FBB000"></i-icon>
          </view>
          <view class="font-24 color-666" v-if="pageDetail.buyerstorename">{{pageDetail.buyercompanyname}}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">联系人</view>
          <view class="mid-right text-line">{{ pageDetail.buyername }}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">联系电话</view>
          <view class="mid-right text-line">{{ pageDetail.buyermobile }}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">联系地址</view>
          <view class="mid-right u-text-left" style="">{{ pageDetail.buyeraddress }}</view>
        </view>
        <view class="remark colorE mid-item" style="height: auto;min-height: 54px !important" v-if="pageDetail.remarks">
          <view class="mid-left">备注</view>
          <view class="mid-right u-text-left" style="color: #333333;">{{ pageDetail.remarks }}</view>
          <!-- <view class="mid-right font-24 color-EB5B01">{{pageDetail.remarks}}</view> -->
        </view>
      </view>
      <view class="buy">
        <view class="mid-item">
          <view class="mid-left" style="width: 300rpx;">
            <i-icon icon="iconmaifangxinxi" type="single" class="mr-5 middle" size="36rpx" color="#666"></i-icon>
            <text class="inform">卖方信息</text>
          </view>
          <view class="mid-right"></view>
        </view>
        <view class="titleName colorE" :style="pageDetail.sellerstorename?'line-height:54rpx':'line-height:108rpx'">
          <view class="font-30 color-333">
            {{ pageDetail.sellerstorename?pageDetail.sellerstorename:pageDetail.sellercompanyname }}
            <i-icon icon="iconbao_1" type="single" class="ml-5 middle" size="32rpx" color="#000"></i-icon>
          </view>
          <view class="font-24 color-666" v-if="pageDetail.sellerstorename">{{ pageDetail.sellercompanyname }}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">联系人</view>
          <view class="mid-right text-line">{{ pageDetail.sellername }}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">联系电话</view>
          <view class="mid-right text-line">{{ pageDetail.sellermobile }}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">联系地址</view>
          <view class="mid-right u-text-left" style="">{{ pageDetail.selleraddress }}</view>
        </view>
        <view class="remark colorE mid-item" style="height: auto;min-height: 54px !important" v-if="pageDetail.bus_remarks">
          <view class="mid-left">备注</view>
          <view class="mid-right u-text-left" style="color: #333333;">{{ pageDetail.bus_remarks }}</view>
          <!-- <view class="mid-right font-24 color-EB5B01">{{pageDetail.bus_remarks}}</view> -->
        </view>
      </view>
      <view class="car">
        <view class="mid-item">
          <view class="mid-left " style="width: 100%;">
            <i-icon icon="iconcheliangxinxi" type="single" class="mr-5 middle" size="36rpx" color="#666"></i-icon>
            <text class="inform">交易车辆信息</text>
          </view>
          <view class="mid-right"></view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">车型款式</view>
          <view class="mid-right text-line">{{ pageDetail.car_name }}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">外观/内饰</view>
          <view class="mid-right text-line">
            <view v-if="JSON.stringify(pageDetail) !== '{}'">
              <view :style="{ background: pageDetail.car_colour.outerColour.colorCoding }" class="iconcolor"></view>
              {{ pageDetail.car_colour.outerColour.color }} /{{ pageDetail.car_colour.inColour.color }}
              <view v-if="pageDetail.car_colour.inColour.neiColor.length == 1" :style="{ background: pageDetail.car_colour.inColour.colorCoding }"
                class="iconcolor"></view>
              <view v-else class="iconcolor">
                <view class="iconcolor2" v-for="(it, i) in pageDetail.car_colour.inColour.neiColor" :key="i" :style="{ background: it }"></view>
              </view>
            </view>
          </view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">指导价格</view>
          <view class="mid-right text-line">{{ pageDetail.guide_price }}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">车辆销售价</view>
          <view class="mid-right text-line">{{ pageDetail.sales_price }}万</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">定金金额</view>
          <view class="mid-right text-line colEB5C02">￥{{ pageDetail.deposit_amount }}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">生产日期</view>
          <view class="mid-right text-line">{{ pageDetail.produced_date }}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">车辆合格证</view>
          <view class="mid-right text-line">{{pageDetail.conformity_certificate}}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">车辆详情</view>
          <view class="mid-right text-line">{{ returnCarDetail(pageDetail.car_details) }}</view>
        </view>
        <view class="mid-item colorE">
          <view class="mid-left">交车日期</view>
          <view class="mid-right text-line">
            <text>{{ returncarDate(pageDetail.delivery_date) }}</text>
          </view>
        </view>
      </view>
      <view class="mt-20 orderDetail">
        <view class="border-bottom-1 title">订单信息</view>
        <view class="pad-t-b-10">
          <view class="flex">
            <view class="color-999 font-24 width-30">订单号：</view>
            <view class="width-70 u-text-right flex u-text-right">
              <view class="flex-jc-sb orderNumer s-line-text">{{ pageDetail.order_number }}</view>
              <view class="flex-jc-sb copy" @click="copy(pageDetail.order_number)">复制</view>
            </view>
          </view>
          <view class="flex">
            <view class="color-999 font-24 width-30">定金金额：</view>
            <view class="width-70 u-text-right colEB5C02">￥{{ pageDetail.deposit_amount }}</view>
          </view>
          <view class="flex" v-for="(it1, index) in pageDetail.trace" :key="index">
            <view class="color-999 font-24 width-30">{{ returnExpressAction(it1.action) }}:</view>
            <view class="width-70 u-text-right">{{ it1.add_time }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 买车 待付款 -->
    <view class="fixedBottomBtn" v-if="ordertab == 0 && pageDetail.contract_status == '0'">
      <view class="call" @click="call(1)">
        <i-icon icon="iconkefu1" type="single" class="mr-5 middle" size="54rpx" color="#666"></i-icon>
        <view class="font-30 color-333">客服</view>
      </view>
      <view class="btn">
        <view class="btnWrap flex">
          <view class="width-30 u-text-center">
            <view class="font-24 color-666 line22">合计定金：</view>
            <view class="color-EB5B01 font-28 font-bold line22">￥{{ pageDetail.deposit_amount }}</view>
          </view>
          <view class="width-30 left" @click="$u.throttle(setPopup('取消'), 1000)">取消订单</view>
          <view class="width-40 right" @click="goPay">去付款</view>
        </view>
      </view>
    </view>
    <!-- 买车 待确认 待发货-->
    <view class="fixedBottomBtn" v-if="
				(ordertab == 0 && (pageDetail.contract_status == '1' || pageDetail.contract_status == '2')) ||
					(ordertab == 1 && (pageDetail.contract_status == '0' || pageDetail.contract_status == '3'))
			">
      <view class="call" @click="call(1)">
        <i-icon icon="iconkefu1" type="single" class="mr-5 middle" size="54rpx" color="#666"></i-icon>
        <view class="font-30 color-333">客服</view>
      </view>
      <view class="btn">
        <view class="btnWrap flex">
          <view class="width-50 left" @click="contactSeller">
            <i-icon icon="iconxiaoxi" type="single" class="mr-5 middle" size="36rpx" color="#FFE03B"></i-icon>
            {{ordertab == 0?'联系商家':'联系买方'}}
          </view>
          <view class="width-50 right" @click="call(2)">
            <i-icon icon="iconlianxi" type="single" class="mr-5 middle" size="36rpx" color="#333"></i-icon>
            {{ordertab == 0?'致电商家':'致电买方'}}
          </view>
        </view>
      </view>
    </view>
    <!-- 买车  待发货-->
    <view class="fixedBottomBtn" v-if="ordertab == 1 && pageDetail.contract_status == '2'">
      <view class="call" @click="call(1)">
        <i-icon icon="iconkefu1" type="single" class="mr-5 middle" size="54rpx" color="#666"></i-icon>
        <view class="font-30 color-333">客服</view>
      </view>
      <view class="btn">
        <view class="btnWrap flex">
          <view class="width-50 left" @click="contactSeller">
            <i-icon icon="iconxiaoxi" type="single" class="mr-5 middle" size="36rpx" color="#FFE03B"></i-icon>
            联系买方
          </view>
          <view class="width-50 right" v-if="pageDetail.contract_status == '2'" @click="confirmDelivery">确定录入信息</view>
        </view>
      </view>
    </view>

    <!-- 买车 待收货 -->
    <view class="fixedBottomBtn" v-if="ordertab == 0 && pageDetail.contract_status == '3'">
      <view class="call" @click="call(1)">
        <i-icon icon="iconkefu1" type="single" class="mr-5 middle" size="54rpx" color="#666"></i-icon>
        <view class="font-30 color-333">客服</view>
      </view>
      <view class="btn">
        <view class="btnWrap flex">
          <view class="width-50 left" @click="contactSeller">
            <i-icon icon="iconxiaoxi" type="single" class="mr-5 middle" size="36rpx" color="#FFE03B"></i-icon>
            联系商家
          </view>
          <view class="width-50 right" @click="$u.throttle(setPopup('收货'), 1000)">确认收货</view>
        </view>
      </view>
    </view>
    <!-- 买车 已完成 -->
    <view class="fixedBottomBtn" v-if="(ordertab == 0 && pageDetail.contract_status == '4') || (ordertab == 1 && pageDetail.contract_status == '4')">
      <view class="call" @click="call(1)">
        <i-icon icon="iconkefu1" type="single" class="mr-5 middle" size="54rpx" color="#666"></i-icon>
        <view class="font-30 color-333">客服</view>
      </view>
      <view class="btn">
        <view class="btnWrap-3 flex">
          <view class="width-30 left">
            <i-icon icon="iconshanchu" type="single" class="mr-5 middle" size="36rpx" color="#FFE03B"></i-icon>
            <view class="inline-block" @click="$u.throttle(setPopup('删除'), 1000)">删除订单</view>
          </view>
          <view class="width-30 middle-wrap" @click="contactSeller">
            <i-icon icon="iconxiaoxi" type="single" class="mr-5 middle" size="36rpx" color="#FFE03B"></i-icon>
            <view class="inline-block">{{ ordertab == 0 ? '联系商家' : '联系买方' }}</view>
          </view>
          <view class="width-40 right" @click="contactSeller">
            <i-icon icon="iconlianxi" type="single" class="mr-5 middle" size="36rpx" color="#333"></i-icon>
            {{ ordertab == 0 ? '联系商家' : '联系买方' }}
          </view>
        </view>
      </view>
    </view>
    <!-- 客服  联系买方 致电卖方  确认合同-->
    <view class="fixedBottomBtn" v-if="ordertab == 1 && pageDetail.contract_status == '1'">
      <view class="call" @click="call(1)">
        <i-icon icon="iconkefu1" type="single" class="mr-5 middle" size="54rpx" color="#666"></i-icon>
        <view class="font-30 color-333">客服</view>
      </view>
      <view class="btn">
        <view class="btnWrap-3 flex">
          <view class="width-30 left" @click="contactSeller">
            <i-icon icon="iconxiaoxi" type="single" class="mr-5 middle" size="36rpx" color="#FFE03B"></i-icon>
            <view class="inline-block">联系买方</view>
          </view>
          <view class="width-30 middle-wrap">
            <i-icon icon="iconlianxi" type="single" class="mr-5 middle" size="36rpx" color="#FFE03B"></i-icon>
            <view class="inline-block" @click="call">致电买方</view>
          </view>
          <view class="width-40 right" @click="viewContract">确认合同</view>
        </view>
      </view>
    </view>
    <u-select v-model="expressShow" mode="single-column" :list="expressList" @confirm="selectExpress"></u-select>
    <u-popup v-model="popup.show" mode="center" border-radius="14" width="540rpx" height="358rpx">
      <view class="popup-title">温馨提示</view>
      <view class="popup-content">{{ popup.title }}</view>
      <view class="getGoods flex">
        <view class="width-50 left">
          <view class="inline-block" @click="popup.show = false">取消</view>
        </view>
        <view class="width-50 right" v-if="popup.type === '收货'" @click="confirmReceipt">{{ popup.btnText }}</view>
        <view class="width-50 right" v-if="popup.type === '删除'" @click="DeleteOrderTask">{{ popup.btnText }}</view>
        <view class="width-50 right" v-if="popup.type === '取消'" @click="CancelOrderTask">{{ popup.btnText }}</view>
      </view>
    </u-popup>
  </view>
	</page-loading>
</template>

<script src="./carOrderDetail.js"></script>

<style src="./carOrderDetail.scss" lang="scss" scoped></style>
